<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{mall/header::head-fragment('tea-shop-首页','index')}">

</head>
<body>
<header th:replace="~{mall/header::header-fragment}"></header>
<content id="content">
    <nav th:replace="~{mall/header::nav-fragment}"></nav>
    <div id="banner">
        <div class="all-sort-list">
            <th:block th:each="category : ${categories}">
            <div class="item">
                <h3><span>·</span><a href="##"><th:block th:text="${category.categoryName}"></th:block></a></h3>
                <div class="item-list clearfix">
                    <div class="subitem">
                        <th:block th:each="secondLevelCategory : ${category.secondLevelCategoryVOS}">
                        <dl class="fore1">
                            <dt><a href="#"><th:block th:text="${secondLevelCategory.categoryName}"></th:block></a></dt>
                            <dd>
                                <th:block th:each="thirdLevelCategory : ${secondLevelCategory.thirdLevelCategoryVOS}">
                                <em><a href="#"th:href="@{'/search?goodsCategoryId='+${thirdLevelCategory.categoryId}}">
                                    <th:block th:text="${thirdLevelCategory.categoryName}"></th:block>
                                </a></em>
                                </th:block>
                            </dd>
                        </dl>
                        </th:block>
                    </div>
                </div>
            </div>
            </th:block>
        </div>
        <div class="swiper-container fl">
            <div class="swiper-wrapper">
                <!-- 配置了轮播图则显示后台配置的轮播图 -->
                <th:block th:unless="${#lists.isEmpty(carousels)}">
                    <th:block th:each="carousel : ${carousels}">
                        <div class="swiper-slide">
                            <a th:href="@{${carousel.redirectUrl}}">
                                <img th:src="@{${carousel.carouselUrl}}" alt="">
                            </a>
                        </div>
                    </th:block>
                </th:block>
                <!-- 未配置轮播图则显示默认的三张轮播图 -->
                <th:block th:if="${#lists.isEmpty(carousels)}">
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner01.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner02.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./mall/image/swiper/banner03.jpg" alt="">
                    </div>
                </th:block>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <div id="sub_banner">
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hotGoodses)}">
            <th:block th:each="hotGoodse : ${hotGoodses}">
                <div class="hot-image">
                    <a th:href="@{'/goods/detail/'+${hotGoodse.goodsId}}">
                        <img th:src="@{${hotGoodse.goodsCoverImg}}" th:alt="${hotGoodse.goodsName}">
                    </a>
                </div>
            </th:block>
        </th:block>
        <!-- 未配置热销商品则显示默认 -->
        <th:block th:if="${#lists.isEmpty(hotGoodses)}">
            <div class="hot-image">
                <a href="##">
                    <img src="./mall/image/sub_banner/r4.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img src="./mall/image/sub_banner/hot2.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img src="./mall/image/sub_banner/hot3.jpg" alt="">
                </a>
            </div>
            <div class="hot-image">
                <a href="##">
                    <img src="./mall/image/sub_banner/hot4.jpg" alt="">
                </a>
            </div>
        </th:block>
    </div>

    <!--新品上线-->
    <div id="flash" class="product-section" style="
    background-image: url('/mall/image/col2bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0;
    position: relative;
    width: 100%;
    min-height: 390px;
    aspect-ratio: 5 / 2;
">
        <!-- 内容容器 -->
        <div style="width: 1226px; margin: 0 auto;">
            <!-- 标题 -->
            <div class="section-header" style="margin-bottom: 20px;">
                <h2>新品上线</h2>
            </div>

            <!-- 商品列表 -->
            <ul style="
            display: flex;
            justify-content: space-between;
            padding: 0;
            margin: 0;
            list-style: none;
        ">
                <!-- 动态商品 -->
                <th:block th:unless="${#lists.isEmpty(newGoodses)}">
                    <th:block th:each="newGoods : ${newGoodses}">
                        <li class="new-goods-item" style="width: 234px;">
                            <a th:href="@{'/goods/detail/'+${newGoods.goodsId}}">
                                <img th:src="@{${newGoods.goodsCoverImg}}" alt="" style="width: 160px; height: 160px; margin: 0 auto 20px; display: block;" />
                                <p class="name" th:text="${newGoods.goodsName}" style="text-align: center;"></p>
                                <p class="discount" th:text="${newGoods.goodsIntro}" style="text-align: center;"></p>
                                <p class="item_price" th:text="${newGoods.sellingPrice}" style="text-align: center;"></p>
                            </a>
                        </li>
                    </th:block>
                </th:block>

                <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(newGoodses)}">
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/m6.jpg" alt=""/>
                        <p class="name">中端小种红茶 外山小种</p>
                        <p class="discount">口感清爽 甜润不腻</p>
                        <p class="price">150元+/500克</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/headphones.jpg" alt=""/>
                        <p class="name">白茶 白毫银针</p>
                        <p class="discount">清雅毫香 鲜爽甘甜</p>
                        <p class="price">500元+/500克</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/pc.jpg" alt=""/>
                        <p class="name">黄茶 蒙顶黄芽</p>
                        <p class="discount">清香带甜 入口柔和</p>
                        <p class="price">500元+/500克</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/air.jpg" alt=""/>
                        <p class="name">滇桂黑茶 广西六堡茶（老茶）</p>
                        <p class="discount">醇厚甜滑 回甘持久</p>
                        <p class="price">1000元+/500克</p>
                    </a>
                </li>
                <li>
                    <a href="##">
                        <img src="./mall/image/sub_banner/baby-car.jpg" alt=""/>
                        <p class="name">滇桂黑茶 普洱茶</p>
                        <p class="discount">绵滑甜润 喉韵深沉</p>
                        <p class="price">500元+/500克</p>
                    </a>
                </li>
            </th:block>
        </ul>
    </div>
    </div>
    <!--    绿色的区块，全屏展示 -->
    <div class="col3bg" style="width: 100%;">
        <div class="col3"         style="background-image: url('/mall/image/col3bg.png'); background-size: cover; width: 100%; height: 390px;">
            <!-- 使用 flex 容器实现横向布局 -->
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; gap: 40px; flex-wrap: nowrap;">
                <!-- 左侧图片 -->
                <h4 class="cltbg2">
                    <img src="/mall/image/r6.png" alt="左侧图标" style="width: 423px; height: auto; max-width: 90%; height: auto;">
                </h4>

                <!-- 中间文字内容 -->
                <div class="c3con"                 style="text-align: center; max-width: 600px;font-size: 18px; flex: 1; color: #f7ecb5;">
                    <p>
                        中国是茶的故乡，也是茶文化的发源地。中国茶的发现和利用已有四千七百多年的历史，且长盛不衰，传遍全球。茶是中华民族的举国之饮，发于神农，闻于鲁周公，兴于唐朝，盛于宋代，普及于明清之时。中国茶文化糅合佛、儒、道诸派思想，独成一体，是中国文化中的一朵奇葩！同时，茶也已成为全世界最大众化、最受欢迎、最有益于身心健康的绿色饮料。茶融天地人于一体，提倡“天下茶人是一家”。茶文化的内涵其实就是中国文化的一种具体表现。中国素有礼仪之邦之称谓，茶文化的精神内涵即是通过沏茶、···
                    </p>
                </div>

                <div style="position: relative; display: inline-block;">
                    <!-- 图片 -->
                    <img class="a_pic" src="/mall/image/coltbg1.png" alt="右侧图标" style="width: 200px; height: auto;">

                    <!-- 覆盖文字：茶文化 -->
                    <div style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-110%, -50%);
                    font-size: 35px;
                    color: #b3b1b8;
                    padding: 5px 10px;
                    border-radius: 4px;
                    writing-mode: vertical-rl;
                    text-align: center;
                    font-family: 'KaiTi', sans-serif
                ">
                        茶  文  化
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="recommend" class="product-section" style="
    background-image: url('/mall/image/col4bg.png');
    background-size: contain;
    background-position: center 457px;
    background-repeat: no-repeat;
    padding: 0;
    position: relative;
    width: 100%;
    min-height: 720px;
">
        <div style="width: 1226px; margin: 0 auto;">
        <h2>为你推荐</h2>
        <ul>
            <!-- 已配置推荐商品则显示配置内容 -->
            <th:block th:unless="${#lists.isEmpty(recommendGoodses)}">
                <th:block th:each="recommendGoods : ${recommendGoodses}">
                    <li>
                        <a th:href="@{'/goods/detail/'+${recommendGoods.goodsId}}">
                            <div class="info discount" th:text="${recommendGoods.tag}">
                                新品
                            </div>
                            <img th:src="@{${recommendGoods.goodsCoverImg}}" th:alt="${recommendGoods.goodsName}">
                            <p class="name" th:text="${recommendGoods.goodsName}">NewBeeMall</p>
                            <p class="item_price" th:text="${recommendGoods.sellingPrice}">NewBeeMall</p>
                            <p class="counter">猜你喜欢</p>
                            <div class="comment">
                                <p>精选好茶</p>
                                <p>为您推荐</p>
                            </div>
                        </a>
                    </li>
                </th:block>
            </th:block>
            <!-- 未配置则显示默认 -->
            <th:block th:if="${#lists.isEmpty(recommendGoodses)}">
                <li>
                    <a href="goods/detail/7">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/r1.jpg" alt=""/>
                        <p class="name">黄芽茶 君山银针</p>
                        <p class="price">800元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/9">
                        <div class="info discount">
                            5折起
                        </div>
                        <img src="./mall/image/sub_banner/r2.jpg" alt=""/>
                        <p class="name">黄大茶 霍山黄大茶</p>
                        <p class="price">150元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/39">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/r5.jpg" alt=""/>
                        <p class="name">品茶瓷器茶杯</p>
                        <p class="price">100元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/24">
                        <div class="info discount">
                            官降
                        </div>
                        <img src="./mall/image/sub_banner/m6.jpg" alt=""/>
                        <p class="name">中端小种红茶 外山小种</p>
                        <p class="price">150元+/500克起</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/29">
                        <div class="info discount">
                            新品
                        </div>
                        <img src="./mall/image/sub_banner/r6.jpg" alt=""/>
                        <p class="name">四川边茶 金尖</p>
                        <p class="price">50元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/39">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/r5.jpg" alt=""/>
                        <p class="name">品茶瓷器茶杯</p>
                        <p class="price">100元</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/1">
                        <div class="info discount">
                            享折扣
                        </div>
                        <img src="./mall/image/sub_banner/r4.jpg" alt=""/>
                        <p class="name">炒青绿茶 碧螺春</p>
                        <p class="price">1300元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/2">
                        <div class="info discount">
                            最低价
                        </div>
                        <img src="./mall/image/sub_banner/r3.jpg" alt=""/>
                        <p class="name">炒青绿茶 龙井</p>
                        <p class="price">800元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/9">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/r2.jpg" alt=""/>
                        <p class="name">黄大茶 霍山黄大茶</p>
                        <p class="price">150元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="goods/detail/7">
                        <div class="info discount">
                            热销
                        </div>
                        <img src="./mall/image/sub_banner/r1.jpg" alt=""/>
                        <p class="name">黄芽茶 君山银针</p>
                        <p class="price">800元+/500克</p>
                        <p class="counter">猜你喜欢</p>
                        <div class="comment">
                            <p>精选好茶</p>
                            <p>为您推荐</p>
                        </div>
                    </a>
                </li>
            </th:block>
        </ul>
        </div>
    </div>
</content>
<div th:replace="~{mall/footer::footer-fragment}"></div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/mall/js/swiper-bundle.min.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/mall/js/index.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>


</body>
</html>
